<template>
  <div class="page-container">
    <el-card class="box-card">
      <div class="page-form">
        <el-form ref="form" :model="form" label-width="120px" :inline="true">
          <el-form-item label="论文题目：">
            <el-input v-model="form.title" style="width: 300px" placeholder="请输入论文题目"></el-input>
          </el-form-item>
          <el-form-item label="可选专业：">
            <el-select v-model="form.professional" placeholder="请选择专业" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目申报时间：">
            <el-date-picker v-model="form.time" type="date" placeholder="选择日期" style="width: 300px"></el-date-picker>
          </el-form-item>
          <el-form-item label="题目类型：">
            <el-select v-model="form.type" placeholder="请选择类型" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目来源：">
            <el-select v-model="form.resource" placeholder="请选择类型" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择模式：">
            <el-select v-model="form.model" placeholder="请选择类型" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题目所属专业：">
            <el-select v-model="form.titleProfessional" placeholder="请选择类型" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指导老师：">
            <el-input v-model="form.teacher" style="width: 300px" placeholder="只输入指导老师"></el-input>
          </el-form-item>
          <el-form-item label="教师职称：">
            <el-input v-model="form.teacherTitle" style="width: 300px" placeholder="请输入教师职称"></el-input>
          </el-form-item>
          <el-form-item label="导师联系时间：">
            <el-date-picker
              v-model="form.contactTime"
              type="date"
              placeholder="请选择联系时间"
              style="width: 300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="学生姓名：">
            <el-input v-model="form.studentName" style="width: 300px" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="学生院系专业：">
            <el-select v-model="form.departments" placeholder="请选择类型" style="width: 300px">
              <el-option label="挖掘机" value="shanghai"></el-option>
              <el-option label="杀猪佬" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 400px;">提交</el-button>
          </el-form-item>-->
        </el-form>
      </div>
      <p>添加内容描述：</p>
      <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="textarea"></el-input>
      <el-button type="success" class="page-button" @click="onSubmit">提交信息</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "PagePermission",
  data() {
    return {
      form: {
        title: "",
        professional: "",
        time: "",
        resource: "",
        model: "",
        titleProfessional: "",
        teacher: "",
        teacherTitle: "",
        contactTime: "",
        studentName: "",
        departments: ""
      },
      textarea: ""
    };
  },
  methods: {
    onSubmit() {
      console.log("提交的内容", this.form, this.textarea);
    }
  }
};
</script>
<style scoped>
.page-container {
  padding: 20px;
}

.page-form {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fcfbfb;
  margin-bottom: 20px;
}

.page-button {
  margin-top: 30px;
}
</style>
